<template>
    <div class="menu-role-form">

        <el-form ref="form" :model="menuRole" label-width="80px">
            <el-row>
                <el-form-item>
                    <template slot="label"><span style="color: red">*</span>选择角色</template>
                    <el-select clearable v-model="menuRole.roleId" class="condition-input" style="width:500px">
                        <el-option  v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-row>

            <el-row>
                <el-form-item>
                    <template slot="label"><span style="color: red">*</span>选择菜单</template>
                        <el-tree
                                :data="menuList"
                                show-checkbox
                                node-key="id"
                                 ref="tree"
                                :default-checked-keys="checkedKeys"
                                :props="defaultProps"
                                :current-node-key="menuRole.menuIds"
                        >
                        </el-tree>

                </el-form-item>
            </el-row>

            <div class="bottom-btn">
                <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="onEditSubData">保 存 数 据</el-button>
                </span>
            </div>

        </el-form>

    </div>
</template>

<script>
    import roleApi from '@/api/role/roleApi'
    import menuApi from '@/api/menu/menuApi'
    import menuRoleApi from '@/api/menuRole/menuRoleApi'
    export default {
        name: "MenuRoleForm",
        data(){
            return{
                roleList:[],   //角色列表
                menuList: [],  //菜单列表
                checkedKeys: [],  //默认选中的key
                menuRole:{     //保存时提交参数
                    roleId:'',
                    menuIds:'',
                },
                defaultProps: {
                    children: 'children',
                    label: 'menuName'
                }
            }
        },
        methods:{
            //查询已有权限
            async queryPermissionByRoleId(roleId){
                let res = await menuRoleApi.getList(roleId);
                if (res.code == '200'){
                    if (res.data.length == 0){
                        this.$refs.tree.setCheckedKeys([]);
                    }else {
                        let checkedKeys = []
                        res.data.forEach(item =>{
                            if (item.isSelect == '1'){
                                checkedKeys.push(item.menuId)
                            }
                        })
                        this.$refs.tree.setCheckedKeys(checkedKeys);
                    }
                }

           },
            async onEditSubData(){
                if (this.menuRole.roleId == ''){
                    this.$message.error("请选择角色")
                }else {
                    //获取子节点未全选时的父节点id
                    let pIds = this.$refs.tree.getHalfCheckedKeys();
                    let ids = this.$refs.tree.getCheckedKeys();
                    let list = pIds.concat(ids);
                    let menuIds = '';
                    list.forEach(id=>{
                        menuIds = menuIds.concat(id+",")
                    })
                    //所有选择的id
                    this.menuRole.menuIds = menuIds;
                    //半选id
                    let falsePid = '';
                    pIds.forEach(id=>{
                        falsePid = falsePid.concat(id+",")
                    })
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    let res = await menuRoleApi.save(this.menuRole,falsePid);
                    if (res.code == '200'){
                        this.queryPermissionByRoleId(this.menuRole.roleId)
                        this.$message.success("保存成功")
                    }else {
                        this.$message.error(res.msg)
                    }
                    loading.close()

                }
            }
        },
        watch:{
            'menuRole.roleId':{
                handler(newVal,oldVal){
                    this.queryPermissionByRoleId(newVal)
                }
            },
        },
        created:async function(){
            //查询角色
            let res=await roleApi.getListAll();
            if (res.code == '200'){
                res.data.forEach(item=>{
                    let roleItem ={
                        value:item.id,
                        label:item.roleName+'('+item.roleCode+')'
                    }
                    this.roleList.push(roleItem);
                })
            }else {
                this.$message.error("查询角色失败")
            }
            //查询菜单
            let res2 = await menuApi.getListRole({menuName:''});
            if(res2.code == '200'){
                this.menuList = res2.data
            }else {
                this.$message.error("查询菜单失败")
            }

        }

    }
</script>

<style scoped>
    .menu-role-form{
        margin-left: 100px;
    }
    .bottom-btn{
        margin-left: 100px;
    }
</style>